import React, { Component } from 'react';
const queryString = require('query-string');
import { Loading } from '@alifd/next';
import DutyShiftTable from './components/DutyShiftTable';
import './index.scss';
import { minHeight } from "../../conf/config";
import { withRouter } from 'react-router-dom';
const chaxunConfig = require('./tableConfig/chaxun');
const dutyShiftConfig = require('./tableConfig/dutyShift');
const posunConfig = require('./tableConfig/posun');
const yichangConfig = require('./tableConfig/yichang');

@withRouter
class DutyShift extends Component {
  constructor(props) {
    super(props);

    this.state = {
      type: '',
      __loading: true,
      tableConfig: [],
      dialogConfig: [],
      title: '',
      limit:5,
    }
  }

  setType() {
    this.setState({
      __loading: true,
    }, () => {
      let { type } = queryString.parse(this.props.location.search);
      let tableConfig = [];
      let dialogConfig = [];
      let limit = 5;
      let title = '';
      switch (type) {
        case 'dutyShift':
          tableConfig = dutyShiftConfig.tableConfig;
          dialogConfig = dutyShiftConfig.dialogConfig;
          title = dutyShiftConfig.title;
          limit = dutyShiftConfig.limit;
          break;
        case 'posun':
          tableConfig = posunConfig.tableConfig;
          dialogConfig = posunConfig.dialogConfig;
          title = posunConfig.title;
          limit = posunConfig.limit;
          break;
        case 'chaxun':
          tableConfig = chaxunConfig.tableConfig;
          dialogConfig = chaxunConfig.dialogConfig;
          title = chaxunConfig.title;
          limit = chaxunConfig.limit;
          break;
        case 'yichang':
          tableConfig = yichangConfig.tableConfig;
          dialogConfig = yichangConfig.dialogConfig;
          title = yichangConfig.title;
          limit = yichangConfig.limit;
          break;
      }
      this.setState({
        type,
        __loading: false,
        tableConfig,
        dialogConfig,
        title,
        limit,
      });
    });
  }

  componentDidMount() {
    this.setType();
    this.props.history.listen((location, action) => {  // componentWillUnMount 应该unlisten一下？
      let { type } = queryString.parse(location.search);
      if(type !== this.state.type) {
        this.setType();
      }
    });
  }

  render() {
    return (
      this.state.__loading ?
        <Loading fullScreen={true} tip='加载中' /> :
        <div className="duty-shift" style={{ minHeight: `${minHeight}px` }}>
          <DutyShiftTable
            limit={this.state.limit}
            title={this.state.title}
            tableConfig={this.state.tableConfig}
            dialogConfig={this.state.dialogConfig}
            type={this.state.type}
          />
        </div>
    )
  }
}

export default DutyShift;
